<template>
  <el-form-item
    :label="item.label"
    :prop="item.prop"
  >
    <template v-if="item.el === 'input'">
      {{ formData[item.prop] }}
      <el-input
        :value="data[item.prop]"
        placeholder="请输入"
      />
    </template>
  </el-form-item>
</template>

<script lang="jsx">
import { defineComponent, unref, computed } from 'vue';
import { componentMap } from './components';

export default defineComponent({
  name: 'BasicFormItem',
  props: {
    schema: {
      type: Object,
      default: () => ({}),
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:formData'],
  setup(props) {
    const getValue = computed(() => {
      const { formData, schema } = props;
      return {
        model: formData,
        modelValue: formData[schema.prop],
        value: formData[schema.prop],
        values: {
          ...formData,
        },
        schema,
      };
    });

    const getContent = () => {
      const { schema } = props;
      const { component, componentProps = {} } = schema;
      const Comp = componentMap.get(component);
      const placeholder = componentProps.placeholder || '请输入';
      const propsData = {
        placeholder,
        ...unref(componentProps),
      };
      const componentAttrs = {
        ...propsData,
        ...unref(getValue),
      };
      return <Comp {...componentAttrs} />;
    };

    return () => {
      const { schema } = props;
      const { component, itemProps = {}, label, prop, colon } = schema;
      if (!componentMap.has(component)) return null;
      return (
        <el-form-item
          label={colon ? `${label}:` : label }
          prop={prop}
          {...itemProps}
        >
          {getContent()}
        </el-form-item>
      );
    };
  },
});
</script>
